﻿<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="tour_Default" Title="Tour of Nexus" Theme="default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<style>
.hint
{
color: blue;
}
td.Tour div
{
   /*border-bottom: solid 1px black;*/
}
td.Tour .button
{
   background: white;
   border: solid 1px black;
   padding: 2px;
   margin: 2px;
}
</style>
<table border="0" width="500px" class="banner" align="center">
<tr>
   <td class="logo" width="100%"></td>
</tr>
<tr valign="top">
   <td class="Tour">
   <div id="d_Head">
      <h1>Introducing Nexus</h1>
      Nexus is a <b>space</b> for you to view what's <b>important</b> to you in a <b>glance</b>.
      
      Using Nexus, you can:
      <ul>
      <li>Quickly access NUS resources</li>      
      <li>Directly link to your favourites blogs and news feeds</li>
      <li>Customize how you want to view these information</li>
      </ul>
      
      <input type="button" class="button" value="How do i login to Nexus?" onclick="Show(1)" />
      <input type="button" class="button" value="Start using Nexus!" onclick="document.location.href='/login.aspx'" />
   </div>
   
   <div id="d_Login" style="display:none">
   <h1>Login to Nexus</h1>
   <h3>Logging in on Campus</h3>
   <ol>
      <li>Go to http://nexus.nus.edu.sg</li>
      <li>
         Click <img src="/images/login_sso.gif" border="0" /> under Campus Login
         <br /><span class="hint"><img src="/images/hint.png" border="0" />If you are prompted with a login pop-up, please do as shown below.
         <br />Do remember to change the login domain accordingly.
         <br /><b>User Name:</b> nusstu\your userid
         <br /><b>Password:</b> Your password
         </span>
      </li>
   </ol>

   <h3>Logging in off Campus</h3>
   <ol>
      <li>Go to http://nexus.nus.edu.sg</li>
      <li>Enter your <b>NUSNET UserID and Password</b> under Web Login</li>
      <li>Ensure that the login domain is set correctly</li>
      <li>Click the <b>Login</b> button</li>
   </ol>
   <input type="button" class="button" value="What's in my space?" onclick="Show(2)" />
   <input type="button" class="button" value="Start using Nexus!" onclick="document.location.href='/login.aspx'" />
   </div>  
   
   <div id="d_Workspace" style="display:none">
      <h1>Explore Your Space</h1>
      <b><span class="hint"><img src="/images/hint.png" border="0" />Move your mouse over the highlighted items to view their functions</span></b>
      <br /><br />
      <img src="workspace.gif" usemap="#map" border="0" />

      <script language="javascript">
      var strSearch = "<img src='search.gif' /><br /><br />Multiple search engines have been built into Nexus.<br>Click the search engine icon to select the specific search engine you want to use!";
      var strMenuWidget = "<img src='addwidgets.gif' /><br /><br />You can easily add stuff to your tab by clicking here or the <b>[Menu]</b> button to bring up the widgets menu.";
      var strMenuLayout = "<img src='changelayout.gif' /><br /><br />Layouts can be easily changed by clicking on the here or the <b>[Menu]</b> button.";
      var strMenu = "<table border=0><tr><td><img src='menu.png' /></td><td>Click to access the in-page menu</td></tr></table>";
      var strTabs = "<img src='reordertab.gif' /><br /><br />All of your widgets are sorted by Tabs.<br /><br />This allows you to associate a tab with widgets that you feel is related to the tab.<br /><br />Want to reorder a tab, simply drag and drop it to the required location!";
      var strWidgetsReorder = "<img src='reorderwidgets.gif' /><br /><br />The same reordering is available for the widgets in the tab.<br /><br />You can move them anywhere as long as they are within the constraints of the tab.";
      var strWidgets = "Widgets are the main information unit, you will be provided with different information depending on the type of widget chosen.";
      var strWidgetsEdit = "<img src='editwidget.gif' /><br /><br />Click to view commands available to the widget";
      var strWidgetsToggle = "Clicking here to toggle the size of the widget!";
      </script>
      <map id ="map" name="map">
      <area shape ="rect" coords ="226,9,371,37" onmouseover="Tip(strSearch, WIDTH, 400, HEIGHT, 300)" onmouseout="UnTip();"/>
      <area shape ="rect" coords ="419,9,481,29" onmouseover="Tip(strMenuWidget, WIDTH, 550, HEIGHT, 200)" onmouseout="UnTip();"/>
      <area shape ="rect" coords ="486,9,552,30" onmouseover="Tip(strMenuLayout, WIDTH, 500, HEIGHT, 200)" onmouseout="UnTip();"/>
      <area shape ="rect" coords ="555,3,595,45" onmouseover="Tip(strMenu  , WIDTH, 150, HEIGHT, 100)" onmouseout="UnTip();"/>
      <area shape ="rect" coords ="5,47,365,70"  onmouseover="Tip(strTabs, WIDTH, 320, HEIGHT, 300)" onmouseout="UnTip();"/>
      <area shape ="rect" coords ="199,97,393,223"  onmouseover="Tip(strWidgets)" onmouseout="UnTip();"/>
      <area shape ="rect" coords ="171,98,197,119"  onmouseover="Tip(strWidgetsEdit, WIDTH, 450, HEIGHT, 300)" onmouseout="UnTip();"/>
      <area shape ="rect" coords ="5,202,190,216"  onmouseover="Tip(strWidgetsToggle)" onmouseout="UnTip();"/>
      <area shape ="rect" coords ="399,95,600,400"  onmouseover="Tip(strWidgetsReorder, WIDTH, 400, HEIGHT, 300)" onmouseout="UnTip();"/>
      </map>
      
      <input type="button" class="button" value="What do i start out with?" onclick="Show(3)" />
      <input type="button" class="button" value="Start using Nexus!" onclick="document.location.href='/login.aspx'" />
   </div>
   <div id="d_StartWith" style="display:none">
      <h1>What do i start with?</h1>
      When you first login to Nexus, 3 tabs are created specially for you!<br />
      <br />
      <ol>
      <li><b>A NUS Learning tab consisting of IVLE, NUS Library and NUS Communities,</b><br />
      <img src='nuslearning.gif' /><br /><br /></li>
      <li><b>a Communication tab consisting of NUS Messaging and NUSMail,</b><br />
      <img src='communication.gif' /><br /><br /></li>
      <!--
      <li><b>and lastly a tab with a direct link to facebook!</b>
      <br /><span class="hint">As we do not save your passwords, you will need to login to facebook everytime unless you instructed facebook to remember your user account on the PC</span>
      <br />
      <img src='facebook.gif' /></li>
      -->
      <li><b>and lastly a tab telling you what you can do with Nexus!</b>
      </li>
      </ol>
      <input type="button" class="button" value="Start using Nexus!" onclick="document.location.href='/login.aspx'" />
   </div>   
   </td>
</tr>
</table>
    <script language="javascript" src="/js/wz_tooltip.js"></script>
    <script language="javascript" src="/js/tip_balloon.js"></script>
    <script language="javascript">
    var theDivs = new Array();
    theDivs.push('d_Head');
    theDivs.push('d_Login');
    theDivs.push('d_Workspace');
    theDivs.push('d_StartWith');
    
    function $hide(id){var element = document.getElementById(id);if (element != null){element.style.display="none";}}
    function $show(id){var element = document.getElementById(id);if (element != null){element.style.display="";}}
    
    function Show(id)
    {
       for(var i=0;i<theDivs.length;i++)
       {
         if (i==id)
            $show(theDivs[i]);
         else
            $hide(theDivs[i]);
       }    
    }
    </script>
</asp:Content>

